<template>
	<view class="app">
		<view v-if="hasApply" >
			<view v-if="checkStatus==0">
				<view class="top">
					<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shop/Group%203493%402x.png" mode="" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="sp1">
					审核中
				</view>
				<view class="sp2">
					正在审核中，请耐心等待...
				</view>
				<view class="btn" @click="goBack">
					返回首页
				</view>
			</view>
			<view v-if="checkStatus==1">
				<view class="top">
					<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shop/Group%203493%402x.png" mode="" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="sp1">
					审核通过
				</view>
				<view class="sp2">
					恭喜您，审核通过
				</view>
				<view class="btn" @click="goBack">
					返回首页
				</view>
			</view>
			<view v-if="checkStatus==2">
				<view class="top">
					<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/business/Group%203325%402x.png" mode="" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="sp">
					抱歉，审核未通过
				</view>
				<view class="yy">
					<view class="kong">
						
					</view>
					<view class="yy-title">
						未通过原因：
					</view>
					<view class="yy-sp">
						{{reviewReason}}
					</view>
				</view>
				<view class="btn" @click="applyAgain">
					重新申请
				</view>
			</view>
		</view>
		
		<view v-else>
			<view class="order-info box-card">
				<u-form :model="recycler" ref="uForm" >
					<u-form-item  prop="recyclerName" label="姓名  " :label-align="labelAlign" :label-width="labelWidth">
						<u-input v-model="recycler.name" type="text"  placeholder="请输入姓名" />
					</u-form-item>
					<u-form-item  prop="recyclerMobile" label="手机号码" :label-align="labelAlign" :label-width="labelWidth">
						<u-input v-model="recycler.mobile" type="number"  placeholder="请输入手机号码" />
					</u-form-item>
					<u-form-item  prop="orderSiteId" label="所在区域" :label-align="labelAlign" :label-width="labelWidth">
						<view class="address-goto-choose" @click="chooseAddress">
							<text class="address-goto-choose-tips">{{ addressShow }}</text>
							<u-icon name="arrow-right"></u-icon>
						</view>
						<u-picker v-model="citySelectShow" mode="region"  @confirm="citySelectConfirm" ></u-picker>
					</u-form-item>	
				</u-form>
			</view>
			<view class="waste-content box-card">
				
				<view class="waste-content">
					<view class="waste-estimate-title" style="padding-bottom: 10rpx;">
						<view class="waste-estimate-title-left">身份证正面照片：</view>
					</view>
					<view class="waste-content-input">
						<u-upload ref="FrontImguUpload"  width="160rpx" height="160rpx" max-count="1" upload-text="头像面" :action="uploadUrl" :header="uploadHeader" :file-list="recyclerFrontImgList" ></u-upload>
					</view>
					<view class="waste-estimate-title" style="padding-bottom: 10rpx;">
						<view class="waste-estimate-title-left">身份证背面照片：</view>
					</view>
					<view class="waste-content-input">
						<u-upload ref="AcrossImguUpload"  width="160rpx" height="160rpx" max-count="1" upload-text="国徽面" :action="uploadUrl" :header="uploadHeader" :file-list="recyclerAcrossImgLst" ></u-upload>
					</view>
				</view>
			</view>
			<view>
				<view class="waste-content box-card">
					<view class="waste-estimate-title" style="padding-bottom: 10rpx;">
						<view class="waste-estimate-title-left">简介(选填)：</view>
					</view>
					<view class="waste-content-input">
						<u-input placeholder="请输入简介"  maxlength="200" v-model="recycler.remarks" type="textarea"  :auto-height="true" />
					</view>
				</view>
			</view>
			<view class="order-bottom-row">
				<view class="btn1" @click="submitRecycler">
				 	提交
				 </view>
			</view>
		</view>
		
		<view>
			<view class="popup-cover" v-if="popupVisibleS"></view>
			<view class="bottom-popup-mask" v-if="popupVisibleS">
			    <view class="bottom-popup-content">
					<view class="popup-box">
						<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/img/Group 2110@2x.png" mode="" style="width: 100%;height: 100%;"></image>
						<text class="popup-title">提交成功</text>
						<text class="popup-content">我们将在24小时内完成审核，请耐心等待</text>
						<view class="popop-btn-box">
							<view class="popop-btn" @click="goBack">
								知道了
							</view>
						</view>
					</view>
			    </view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				labelWidth: 150,
				labelAlign: "left",
				recycler: {},
				site: {},
				value: '',
				uploadUrl: this.$u.api.user.getUploadUrl(),
				uploadHeader: this.$u.api.user.getUploadHeader(),
				recyclerFrontImgList: [],
				recyclerAcrossImgLst: [],
				addressInfo: {},
				citySelectShow: false,
				hasApply: false,
				checkStatus: '',
				reviewReason: '',
				popupVisibleS: false,
			}
		},
		computed:{
			addressShow(){
				if(this.addressInfo?.province === undefined){
					return "请选择所在区域"
				}
				return `${this.addressInfo?.province}，${this.addressInfo?.city}，${this.addressInfo?.area}`
			}
		},
		onLoad() {
			this.isApply()
		},
		methods: {
			citySelectConfirm(e){
				this.addressInfo = {
					province: e.province.label,
					city: e.city.label,
					area: e.area.label
				}
			},
			chooseAddress(){
				this.citySelectShow = true
			},
			isApply(){
				this.$u.api.recycler.isApply().then(res =>{
					if(res.code == 0){
						this.hasApply = true
						this.checkStatus = res.data.check_status
						this.reviewReason = res.data.review_reason
					}
				}).catch(req =>{
					uni.showToast({
						title:req.msg,
						icon:"error"
					})
				})
			},
			gotoPage(path){
				uni.navigateTo({ url: path });
			},
			getSite(){
				this.site = {}
				this.recycler.recyclerSiteId = 0
				if(!this.vuex_chooseAddress?.addressId){
					return false
				}
				this.$u.api.site.locationGetSite(this.vuex_chooseAddress).then(res => {
					if(res?.data?.siteId){
						this.site = res.data || {}
						this.recycler.recyclerSiteId = this.site.siteId || 0
					} 
				})
			},
			submitRecycler(){
				if(this.recycler.name==undefined||this.recycler.name==''){
					this.$u.toast('请输入姓名')
					return
				}
				if(this.recycler.mobile==undefined||this.recycler.mobile==''){
					this.$u.toast('请输入手机号码')
					return
				}
				const reg = /^1[3-9]\d{9}$/;
				if (!reg.test(this.recycler.mobile)) {
					this.$u.toast('请输入正确的手机号码')
					return
				}
				if(this.addressInfo.province == undefined || this.addressInfo.province==''){
					this.$u.toast('请选择所在区域')
					return
				}
				let FrontImg = '';
				let AcrossImg = '';
				let hasUploadFront = false
				let hasUploadAcross = false
				
				this.$refs.FrontImguUpload.lists.forEach(item => {
					if(item.progress < 100){
						hasUploadFront = true
						return true
					}
					if(item?.response == undefined && item?.url){
						FrontImg = item.url
						return true
					}
						 
					if((item?.response?.status != 200 || item?.response?.data == undefined || item?.response?.data == '')){
						return true
					}
					FrontImg = item.response.data
				})  
				this.$refs.AcrossImguUpload.lists.forEach(item => {
					if(item.progress < 100){
						hasUploadAcross = true
						return true
					}
					if(item?.response == undefined && item?.url){
						AcrossImg = item.url
						return true
					}
						 
					if((item?.response?.status != 200 || item?.response?.data == undefined || item?.response?.data == '')){
						return true
					}
					AcrossImg = item.response.data
				})
				if(hasUploadFront || hasUploadAcross){
					this.$u.toast('有图片正在上传，请耐心等待')
					return false
				}
				this.recycler.idcard_front_img = FrontImg
				this.recycler.idcard_back_img = AcrossImg
				
				if(this.recycler.idcard_front_img==''){
					this.$u.toast('请上传身份证正面照片')
					return
				}
				if(this.recycler.idcard_back_img==''){
					this.$u.toast('请上传身份证背面照片')
					return
				}
				
				let params = {...this.recycler,...this.addressInfo}
				this.$u.api.recycler.addRecycler(params).then(res => {
					if(res.code == 1){ 
						this.popupVisibleS = true
					}else{
						this.$u.toast(res.msg)
					}
				}).catch(err => {
					this.$u.toast('提交失败')
				})
			},
			goBack(){
				uni.navigateBack()
			},
			applyAgain(){
				this.hasApply = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box-card{ padding: 0;margin-top:20rpx;}
	/deep/ .u-form-item {padding: 20rpx !important;white-space: nowrap;}
	/deep/ .u-form-item--left {margin-right: 20rpx;}
	/deep/ .u-flex {overflow: hidden !important;}
	/deep/ .u-flex view {overflow: hidden !important;}
	.address-goto-choose {overflow: hidden;width: 100%;display: flex;align-items: center;justify-content: space-between;}
	.address-goto-choose-tips {overflow: hidden;flex: 1;color: #888;font-size: 28rpx;text-overflow: ellipsis;}
	.site-info{overflow: hidden;} 
	.waste-checkbox-group{ display: flex;width:100%;flex-direction: column;}
	.category-panel{width: 100%;}
	.waste-item{ padding:20rpx;border-top: 1rpx solid #eee;display: flex;align-items: center;justify-content: space-between;}
	.waste-estimate{ }
	.waste-estimate .waste-item{ padding:10rpx 20rpx;}
	.waste-estimate-title{display: flex;align-items: center;padding: 20rpx;}
	.waste-estimate-title-left{flex:1;}
	.waste-estimate-title-right{font-size: 24rpx;color:#aaa;}
	.waste-estimate-right{flex:1;display: flex;align-items: center;margin-left: 20rpx;justify-content: flex-end;}
	.waste-estimate-input{margin:0 10rpx;}
	.waste-estimate-sum{ display: flex;align-items: center;padding:20rpx;border-top: 1rpx solid #eee;}
	.waste-estimate-money{flex:1;text-align: right;}
	.waste-estimate-money-text{font-weight: bold;color:red;margin:0 10rpx;}
	.waste-content-input{padding:0 20rpx 20rpx 20rpx;}
	.order-bottom-row {padding: 20rpx 0;}
	.btn1{width: 690rpx;height: 88rpx;margin-top: 24rpx;margin-left: 30rpx;border-radius: 44rpx;background-color: #36BE6A;text-align: center;line-height: 88rpx;font-size: 32rpx;font-weight: bold;color: white;}

    .top{
    	width: 260rpx;
    	height: 176rpx;
    	margin-top: 106rpx;
    	margin-left: 240rpx;
    }
    .sp{
    	width: 310rpx;
    	height: 38rpx;
    	margin-left: 220rpx;
    	margin-top: 60rpx;
    	font-size: 36rpx;
    	font-family: PingFang SC-Bold;
    	font-weight: bold;
    	color: black;
    }
    .sp1{
    	width: 162rpx;
    	height: 38rpx;
    	margin-left: 296rpx;
    	margin-top: 88rpx;
    	font-size: 36rpx;
    	font-family: PingFang SC-Bold;
    	font-weight: bold;
    	color: black;
    }
    .sp2{
    	width: 268rpx;
    	height: 22rpx;
    	margin-left: 258rpx;
    	margin-top: 30rpx;
    	font-size: 28rpx;
    	color: #6F6F6F;
    }
    .yy{
    	width: 582rpx;
    	height: 166rpx;
    	background-color: white;
    	border-radius: 16rpx;
    	margin-top: 40rpx;
    	margin-left: 84rpx;
    }
    .kong{
    	width: 100%;
    	height: 30rpx;
    }
    .yy-title{
    	font-size: 28rpx;
    	margin-left: 20rpx;
    	
    	color: black;
    }
    .yy-sp{
    	font-size: 24rpx;
    	color: #6F6F6F;
    	margin-left: 20rpx;
    }
    .btn{
    	width: 338rpx;
    	height: 98rpx;
    	margin-top: 98rpx;
    	margin-left: 206rpx;
    	border-radius: 120rpx;
    	background-color: #36BE6A;
    	text-align: center;
    	line-height: 98rpx;
    	color: white;
    	font-size: 32rpx;
    }
</style>
